<template>
    <view class="page_box">
        <!-- <u-navbar :is-back="false" title="首页" v-if="1" :border-bottom="false"></u-navbar> -->
        <view class="bgc-nr login-box">
            <view class="center-login">
                <view class="flex align-end header-title mb108 mt295 ml92">
                    <view class="">注册</view>
                    <view class="f30 ml40" style="opacity: 0.5;" @click="l.to('/pages/register/login')">登录</view>
                </view>

                <view class="h110 ww80 lh110 flex bor-btn align-center">
                    <image class="w34 h34 mr14" src="../../static/login/phone.png" mode=""></image>
                    <view class=" flex align-center">
                        <view class="w1 h26 pl23" style="border-left: 1rpx solid #898F7B;"></view>
                        <input
                            type="number"
                            placeholder="请输入手机号"
                            v-model="phone"
                            placeholder-style="color: #999999;
							font-family: PingFang SC; fonst-size: 28rpx"
                        />
                    </view>
                </view>
                <view class="h110 ww80 lh110 flex bor-btn align-center">
                    <image class="w34 h34 mr14" src="../../static/login/ps.png" mode=""></image>
                    <view class=" flex align-center justify-between">
                        <view class="flex align-center">
                            <view class="w1 h26 pl23" style="border-left: 1rpx solid #898F7B;"></view>
                            <input
                                type="number"
                                v-model="codeInit"
                                placeholder="请输入验证码"
                                placeholder-style="color: #999999; font-family: PingFang SC; fonst-size: 28rpx"
                                style="color: #FFFFFF;"
                            />
                        </view>
                        <view class="">
                            <text v-if="cede" @click="sendCode" class="f28" style="color: #40C6A8;">发送验证码</text>
                            <text v-else class="f28" style="color: #40C6A8;">{{ time }}s后重试</text>
                            <!-- <u-count-down v-else :show-days="false" :show-hours="false" bg-color=""
								color="#40C6A8" @end="endTime" :timestamp="timestamp"></u-count-down> -->
                            <!-- <text v-if="cede === 3" @click="sendCode" class="f28" style="color: #40C6A8;">发送验证码</text> -->
                        </view>
                    </view>
                </view>
                <!-- <view class="h110 ww80 lh110 flex bor-btn align-center">
					<image class="w34 h34 mr14" src="../../static/login/ps2.png" mode=""></image>
					<view class=" flex align-center ww88 justify-between">
						<view class="flex align-center ">
							<view class="w1 h26 pl23" style="border-left: 1rpx solid #898F7B;">
							</view>
							<input v-if="pas == 1" v-model="password" type="password" placeholder="输入登陆密码"
								placeholder-style="color: #999999; font-family: PingFang SC; fonst-size: 28rpx" />
							<input v-if="pas == 2" v-model="password" type="number" placeholder="输入登陆密码"
								placeholder-style="color: #999999; font-family: PingFang SC; fonst-size: 28rpx" />
						</view>
						<view class="">
							<image v-if="pas == 1" @click="cut(2)" class="w34 h34" src="../../static/login/pas.png"
								mode=""></image>
							<image v-if="pas == 2" @click="cut(1)" class="w34 h34" src="../../static/login/bpas.png"
								mode=""></image>
						</view>
					</view>
				</view>
				<view class="h110 ww80 lh110 flex bor-btn align-center">
					<image class="w34 h34 mr14" src="../../static/login/ps2.png" mode=""></image>
					<view class=" flex align-center ww88 justify-between">
						<view class="flex align-center ">
							<view class="w1 h26 pl23" style="border-left: 1rpx solid #898F7B;">
							</view>
							<input v-if="pass == 1" type="password" placeholder="输入登陆密码"
								placeholder-style="color: #999999; font-family: PingFang SC; fonst-size: 28rpx" />
							<input v-if="pass == 2" type="number" placeholder="输入登陆密码"
								placeholder-style="color: #999999; font-family: PingFang SC; fonst-size: 28rpx" />
						</view>
						<view class="">
							<image v-if="pass == 1" @click="cuts(2)" class="w34 h34" src="../../static/login/pas.png"
								mode=""></image>
							<image v-if="pass == 2" @click="cuts(1)" class="w34 h34" src="../../static/login/bpas.png"
								mode=""></image>
						</view>
					</view>
				</view> 
                -->

                <view class="btn-bgc mb336">
                    <button type="default" @click="goToHome" class="cu-btn mt194 r40 h80 ww80 "><text>注册</text></button>
                </view>

                <view class="mt336 btn-text">
                    <view class="ww80 flex" style="margin:336rpx auto 111rpx;">
                        <view class=" mr10">
                            <view style="width: 30rpx; height: 30rpx;" class="cuIcon-roundcheck mt8" v-if="check" @click="check = !check"></view>
                            <view style="width: 30rpx; height: 30rpx;" class="cuIcon-roundcheckfill mt8" v-else @click="check = !check"></view>
                        </view>
                        <view class="w530" @tap="privacyPopup = true">
                            <text>
                                登录注册代表同意xx平台
                                <text style="color: #40C6A8;">《用户服务协议》</text>
                                及
                                <text style="color: #40C6A8;">《用户隐私政策》</text>
                            </text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <u-popup v-model="privacyPopup" border-radius="10" width="637" height="900" mode="center" class="">
           <view class="animation-scale-up">
               <view class="ww100  f28 r10  " style="background-color:#fff">
                   <view class="mt34 mb37 ww100 pt34 text-center"><text style="font-weight: 600; ">用户隐私政策概要</text></view>
                   <view class="pl38 f24 pr38 lh50" style="color: #666666;" @click="l.to('/pages/register/agreement')">
                       请您充分阅读并理解
                       <text style="color: #40C6A8;">《用户服务协议》</text>
                       及
                       <text style="color: #40C6A8;">《用户隐私政策》</text>
                       。
                       <view class="">1、在您浏览使用时，我们会收集您的设备信息、操作日志等用于平台安全风控，并申请存储权限用于下载及缓存。</view>
               
                       <view class="">
                           2、在您使用上传、分享、连麦等服务时，我们需要获取您设备的摄像头、麦克风、相册、地理位置、存储空间等权限，但该等权限均需经您明示授权才会为实现功能或服务时使用。
                       </view>
                   </view>
               </view>
               
               <view class="mt70">
                   <view @tap="consentIng" class="w320 h80 lh80 r40 btn mb54" style=" background-color: #FFFFFF;">同意并继续</view>
               
                   <view class="w320 h80 lh80 r40 btn" @tap="closePopup" style="color: #FFFFFF;">不同意</view>
               </view>
           </view>
        </u-popup>

        <u-popup v-model="consentPopup" border-radius="10" width="637" mode="center">
            <view class="ww100 r10 text-center pb40 animation-scale-up" style="background-color:#fff">
                <view class="pl38 f24 w500 pr38 lh50 pt45 mb48" style="color: #666666; margin: 0 auto;">
                    您需要同意用户隐私政策概要， 才能继续使用我们的产品及服务。
                </view>

                <view @tap="back" class="w320 h80 lh80 r40 back mt48 mb40" style="color: #FFFFFF; background-color: #000000;">返回</view>
            </view>
        </u-popup>

        <yy-tip :isCustom="false" />

        <yy-login v-if="vuex_login"></yy-login>
        <yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            pas: 2,
            pass: 2,
            cede: true,
            value: '',
            password: '',
            phone: '',
            codeInit: '',
            check: false,
            psord: 'password',
            timestamp: 10,
            time: 60,
            list: [
                {
                    name: 'apple',
                    disabled: false,
                },
            ],
            privacyPopup: false,
            consentPopup: false,
        };
    },
    onShow() {},
    onLoad(e) {},
    watch: {
        timestamp(newValue, oldValue) {
            console.log('newValue,==>', newValue);
            console.log(' oldValue==>', oldValue);
        },
    },
    methods: {
        async sendCode() {
            var that = this;
            console.log('this.phone.length==>', this.phone.length);
            if (this.phone.length != 11) return this.l.msgg('手机号不正确');

            let res = await this.$u.get(
                'api/sms/notification-anon/codes',
                {
                    phone: this.phone,
                },
                {},
            );
            this.l.msgg(res.msg);
            if (res.code == 200) {
                that.cede = false;
                var tt = setInterval(() => {
                    that.time--;
                    if (that.time <= 1) {
                        clearInterval(tt);
                        [that.cede, that.time] = [true, 59];
                    }
                }, 1000);
            }
        },

        radioChange(e) {
            console.log('e==>', e);
        },

        endTime() {
            this.code = true;
            console.log('this.code==>', this.code);
        },

        cut(index) {
            this.pas = index;
        },

        cuts(index) {
            this.pass = index;
        },

        closePopup() {
            this.consentPopup = true;
            this.privacyPopup = false;
        },

        back() {
            this.consentPopup = false;
            this.privacyPopup = true;
        },

        consentIng() {
            this.privacyPopup = false;
        },

        async goToHome() {
            if (this.codeInit < 0 || this.phone < 0) return this.l.msgg('手机号验证码不能为空!');
            let res = await this.$u.post(
                'api/user/userRegister',
                {
                    mobile: this.phone,
                    mobileCode: this.codeInit,
                },
                {},
            );
            this.l.msgg(res.msg);
            if (res.code == 200) {
                uni.setStorageSync('user', res.data);
                this.l.to('/pages/register/information');
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.page_box {
    .login-box {
        width: 100%;
        // height: 100%;
        background-image: url('https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/log.png');

        .center-login {
            // text-align: center;
            // margin: 295rpx 90rpx 0;

            .header-title {
                font-size: 46rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
                color: #ffffff;
            }
        }

        .bor-btn {
            font-size: 28rpx;
            color: #ffffff;
            margin: 0 auto;
            font-family: PingFang SC;
            border-bottom: 1rpx solid #3a2d28;
        }

        .btn-bgc {
            width: 100%;
            color: #333333;
            text-align: center;
        }

        .btn-text {
            width: 100%;
            color: #b3b3b3;
            text-align: center;
        }
    }
}

/deep/ .u-mode-center-box[data-v-ece9ae1c] {
    background-color: transparent;

    .btn {
        color: #333333;
        text-align: center;
        margin: 0 auto 57rpx;
    }

    .back {
        color: #333333;
        text-align: center;
        margin: 48rpx auto 0;
    }
}
</style>
